<template>
  <div class="container">
    <normal-title
      title='退款申请'
      :back="true"
    ></normal-title>
    <div class="main">
      <div
        class="card"
        v-for="(item, index) in orderInfo.orderProduct"
        :key="index"
      >
        <img
          class="thumb"
          :src="item.image"
          mode="aspectFit"
        >
        <div class="info">
          <p class="text">{{item.product_name}}</p>
          <div class="spec">规格: {{item.item_no}}</div>
          <div class="row">
            <p class="price"><span class="price-icon">￥</span>{{item.price}}</p>
            <div class="count">X {{item.num}}</div>
          </div>
        </div>
      </div>
      <div
        class="row between"
        @click="chooseReason"
      >
        <div class="item-name">退款原因</div>
        <div class="row">
          <div
            class="reason"
            v-if="activedReason"
          >{{activedReason.reason}}</div>
          <img
            class="arrow"
            src="../../images/arrow_right.png"
            mode="aspectFit"
          >
        </div>
      </div>
      <div class="row between start-item">
        <div>
          <div class="item-name">退款金额</div>
          <div>含运费: ￥0.00</div>
        </div>
        <div class="price">
          ￥{{orderInfo.payment}}
        </div>
      </div>
      <!-- <div class="row">
        <div class="item-name">订单号</div>
        <input
          class="order-no"
          type="text"
          v-model="orderNo"
        >
      </div> -->
      <div class="item-name">退款说明</div>
      <textarea
        class="textarea"
        placeholder="请写下你退款的说明（选填）"
        placeholder-class="placeholder-style"
        v-model="reasonText"
      ></textarea>
    </div>
    <bottom-btn btnName="提交" :tarEvent="addCommit"/>
  </div>
</template>

<script>
import NormalTitle from '@/components/NormalTitle'
import ProductCard from '@/components/ProductCard'
import BottomBtn from '@/components/BottomBtn'
import { request } from '@/utils'

export default {
  components: {
    NormalTitle,
    ProductCard,
    BottomBtn
  },
  computed: {},
  data () {
    return {
      orderInfo: [],
      activedReason: undefined,
      reasonText: ''
    }
  },
  methods: {
    async getOrderInfo () {
      var data, res
      var order_id = this.$root.$mp.query.order_id
      res = await request('/v1/order/' + order_id, 'get')
      this.orderInfo = res.data
    },
    async chooseReason () {
      var _this = this
      var res = await request('/v1/order/get-refund-reason', 'get')
      if (res.data.success) {
        var reasons = res.data.data
        var items = reasons.map(each => {
          return each.reason
        })
        var ids = reasons.map(each => {
          return each.id
        })
      }
      wx.showActionSheet({
        itemList: items,
        success (res) {
          _this.activedReason = {
            id: ids[res.tapIndex],
            reason: items[res.tapIndex]
          }
        },
        fail (res) {

        }
      })
    },
    async addCommit () {
      if (this.activedReason === undefined) {
        wx.showToast({
          title: '请先选择原因~'
        })
        return
      }
      var data, res
      var order_id = this.$root.$mp.query.order_id
      data = {
        order_id,
        refund_fee: this.orderInfo.payment,
        refund_reason_id: this.activedReason.id,
        refund_reason: this.activedReason.reason,
        remark: this.reasonText
      }
      var res = await request('/v1/order/save-refund-apply', 'post', data)
      console.log(res)
      if (res.data.success) {
        wx.showToast({
          title: '申请已提交',
          icon: 'success'
        })
        setTimeout(() => {
          wx.navigateBack({
            delta: 1
          })
        }, 1000)
      } else {
        wx.showToast({
          title: '订单状态有误'
        })
      }
    }
  },
  mounted () {
    this.getOrderInfo()
  },
  onLoad(){
    this.reasonText='',
    this.activedReason= undefined
  }
}
</script>

<style>
page {
  height: 100%;
}
</style>

<style scoped lang="scss">
.container {
  font-size: 24rpx;
  color: #6d6d6d;
  .main {
    padding: 0 25rpx;
    .card {
      .row {
        margin: 0;
      }
      font-size: 26rpx;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      height: 200rpx;
      border-bottom: 1rpx solid #f0f0f0;
      .thumb {
        width: 180rpx;
        height: 180rpx;
        border-radius: 15rpx;
        margin-right: 30rpx;
      }
      .info {
        width: 460rpx;
        height: 180rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        // border: 1rpx solid #000;
        .spec {
          font-size: 20rpx;
          color: #747474;
          margin-bottom: 5rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          position: relative;
          bottom: 20rpx;
        }
        .text {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          height: 75rpx;
          font-size: 600;
          color: #000;
        }
        .row {
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
          height: 35rpx;
          line-height: 26rpx;
          .price {
            color: #b93a39;
            font-size: 36rpx;
            font-weight: 400;
            .price-icon {
              font-size: 24rpx;
              display: inline-block;
            }
          }
          .count {
            font-size: 20rpx;
          }
        }
      }
    }
    .row {
      margin: 40rpx 0;
      .row {
        margin: 0;
      }
    }
    .reason {
      text-align: right;
      white-space: nowrap;
      font-size: 29rpx;
      width: 350rpx;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .arrow {
      width: 35rpx;
      height: 35rpx;
    }
    .order-no {
      width: 400rpx;
      border: 1rpx solid #e2e2e2;
      color: #cdb27e;
      padding: 5rpx 10rpx;
      font-weight: 600;
      margin-left: 45rpx;
    }
    .item-name {
      font-size: 32rpx;
      font-weight: 500;
      color: #000;
    }
    .price {
      color: #b93a39;
      font-weight: 600;
      font-size: 36rpx;
    }
    .textarea {
      box-sizing: border-box;
      background: #f6f6f6;
      width: 700rpx;
      height: 100rpx;
      margin-top: 20rpx;
      font-size: 24rpx;
      padding: 25rpx;
      margin-bottom: 100rpx;
    }
  }
}
</style>




